// 当前项目用户是否有权限访问主页，要考虑当前有没有token,  如果有token, 用户还想去登录页，我们可以直接去主页-这个就是免登录功能
// pemission 设置权限文件→设置前置守卫与后置守卫(这俩都属于路由的方法)→先导入路由
// 实现免登录功能
import nProgress from 'nprogress'
import router from './router'
import store from './store'

const whiteList = ['/login', '/404']

// 前置守卫- 路由跳转之前会进入
// 通过设置beforeEach方法，内涵一个回调函数参数，回调函数中自带三个参数
router.beforeEach(async(to, from, next) => {
  // to 到哪里去
  // from 从哪里来
  // next-必须执行的函数-不执行页面就会卡住 类似与promise的三种状态，pending fullfiled rejected，不执行就会停留在空白页面，既不跳转也不回退
  // next() ，只要填写next()，默认放过通行 login => dashboard => 顺利通行
  // next(false) 终止跳转 => login => dashboard => 留在跳转前的login页面
  // next(地址) 转发地址 next("/test") login => dashboard => 跳到test
  // 不论什么场景下 next必须执行 否则就会页面空白

  // 引入插件nProgress(调用插件中的start方法，可以显示跳转时的进度条)
  nProgress.start() // 开启进度条
  // 判断有无token,因为不是在组件内，不可以直接使用this，要引入store来使用token
  if (store.getters.token) {
    // 如果有token，代表此时已经登陆过了，再判断是否在登陆页面
    // to.path表示要跳转的地址
    if (to.path === '/login') {
      next('/') // 在有token的情况下 登录过 访问的是登录页那直接去主页
      nProgress.done() // next中转地址的情况下 不会走后置守卫  关闭进度条,自己在跳转地址后面添加一个关闭进度条功能
    } else {
      // 这里获取用户资料 不是每次都获取
      // 当前没有用户资料的时候获取 => Vuex(全局) => 有没有用户资料
      if (!store.getters.userId) {
        // 获取用户资料
        await store.dispatch('user/getUserInfo')
      }
      next()
    }
  } else {
    // 这是没有token情况下，先判断是否有放行的白名单,在最上方提前添加可通行的白名单
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 不在白名单中
      next('login') // 跳转到登录页
      nProgress.done() // 关闭进度条
    }
  }
})

// 后置守卫-路由跳转完成进入→afterEach方法中也带一个回调函数参数→内含路由跳转后要执行的功能
router.afterEach(() => {
  nProgress.done() // 关闭进度条
})

